<template>
  <div id="another_finish" v-if="_isMobile()">
    <el-container>
      <el-image :src="image_src[image_kind]">
      </el-image>
    </el-container>
  </div>
  <div class="pc_finish" v-else>
    <el-container class="pc_container">
      <el-image :src="image_src[image_kind]" style="height: 100%">
      </el-image>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "another_finish",

  data() {
    return {
      image_kind: this.$route.params.kind,
      image_src: [
        require('../assets/结束页面/冰壶.png'),
        require('../assets/结束页面/单板滑雪.png'),
        require('../assets/结束页面/短道速滑.png'),
        require('../assets/结束页面/自由式滑雪.png'),
        require('../assets/结束页面/花样滑冰.png'),
        require('../assets/结束页面/雪橇.png'),
        require('../assets/结束页面/雪车.png'),
        require('../assets/结束页面/高山滑雪.png'),
      ],
    }
  },

  methods: {
    _isMobile() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      return flag !== null;
    },
  }
}
</script>

<style scoped>
.pc_finish {
  height: 100%;
}
.pc_container {
  height: 100%;
  margin-left: 18%;
}
.el-image {
  height: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%)translateX(-50%);
}
</style>
